<script setup lang="ts">
import { has } from 'lodash-es'
import { CustomRules, rateLimit, whiteList } from './components'

const route = useRoute()
const router = useRouter()

type ModuleKeys = 'whiteList' | 'customRules' | 'speedLimit'

const componentMap: Record<ModuleKeys, Component> = {
  whiteList,
  customRules: CustomRules,
  speedLimit: rateLimit,
}
const currComponent = computed(() => {
  const mod = String(route.params?.module || '')
  if (has(componentMap, mod)) {
    return componentMap[mod as ModuleKeys]
  }
  return whiteList
})

onBeforeMount(() => {
  const mod = String(route.params?.module || '')
  if (!mod) {
    router.replace({
      name: 'CdnNodeSecurityConfiguration',
      params: {
        module: 'whiteList',
      },
    })
  }
})
</script>

<template>
  <component :is="currComponent" />
</template>

<style scoped></style>
